<meta charset="utf-8">
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .clearfix:after{
        display: table;
        content: "";
        clear: both;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    li{
        float: left;
        list-style: none;
        border:1px solid #ccc;
        border-left: none;
        width:50%;
        height:150px;
        box-sizing: border-box;
        padding: 12px 0 0 12px;
    }
    
    p:first-child{
        font-size: 12px;
        font-weight: bold;
    }
    p:nth-child(2){
        font-size: 12px;
        color:rgb(107, 107, 107);
    }
    .box{
        width:700px;
        margin: 20px auto;
        
    }
    .box1{
        width:220px;
        padding:22px 56px 46px 18px;
        box-sizing: border-box;
        border:1px solid #ccc;
    }
    .box1 p{
        margin-top:20px; 
    }
    .box2{
        width:460px;
        
    }
    .box1 img{
        margin-left: 10px;
        margin-top: 54px;
    }
    li:nth-of-type(-n+2){
        border-bottom: none;
    }
    .box2 img{
        width:114px;
        transition: all .8s ease-out;
        margin-left: 10px;
    }
    .box2 p{
        margin-bottom: 10px;
    }
    .box2 img:hover{
        transform: translate(-10px);
    }
</style>
<div class="box clearfix">
    <div class="fl box1">
        <p>超级信用卡</p>
        <p>线上线下课累计彩贝积分</p>
        <div><img src="images/1.bmp"/></div>
    </div>
    <div class="fl box2">
        <ul class="clearfix">
            <li>
                <div class="fl">
                    <p>彩贝抢霸</p>
                    <p>每天10点更新</p>
                </div>           
                <div class="fl"><img src="images/2.bmp"/></div>
            </li>
            <li>
                <div class="fl">
                    <p>热门优惠劵</p>
                    <p>全场免费领取</p>
                </div>           
                <div class="fl"><img src="images/3.bmp"/></div>
            </li>
            <li>
                <div class="fl">
                    <p>促销活动</p>
                    <p>汇集全网优惠</p>
                </div>           
                <div class="fl"><img src="images/4.bmp"/></div>
            </li>
            <li>
                <div class="fl">
                    <p>精挑细选</p>
                    <p>给你最好的选择</p>
                </div>           
                <div class="fl"><img src="images/5.bmp"/></div>
            </li>
        </ul>   
    </div>
</div>
    